<ngs-panel [option]="panelOption">

    <nz-tabset>
        <nz-tab nzTitle="基本信息">
            <ngs-block title="基本信息">
                <ngs-form [option]="baseOption" #baseForm></ngs-form>
            </ngs-block>
            <ngs-block title="图片设置">
                <ngs-form [option]="imageOption" #imageForm></ngs-form>
            </ngs-block>

        </nz-tab>
        <!-- <nz-tab nzTitle="sku配置">
            <div class="perm-root">
                <div class="perm-root-card">
                    <nz-table #smallTable [nzBordered]="false" nzSize="small" [nzData]="catPropData"
                        [nzShowPagination]="false">
                        <thead>
                            <tr>
                                <th>规格名称</th>
                                <th>排序</th>
                                <th>订单排序</th>
                                <th nzWidth="80px">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let data of catPropData,let i = index" [ngStyle]="data.style">
                                <td><input type="text" nz-input [(ngModel)]="data.name" placeholder="规格名称" /></td>
                                <td><input type="text" nz-input [(ngModel)]="data.sort" placeholder="排序" /></td>
                                <td><input type="text" nz-input [(ngModel)]="data.orderSort" placeholder="订单排序" /></td>
                                <td style="display: flex;">
                                    <a nz-button nzType="link" (click)="clickCatProp(data,i)">选择</a>
                                    <a nz-button nzType="link" nzDanger>移除</a>
                                </td>
                            </tr>
                        </tbody>
                    </nz-table>
                    <button nz-button nzType="dashed" class="add-button" (click)="addCatProp()"
                        style="margin: 12px 0px;padding: 0 8px;width: 100%;">
                        <i nz-icon nzType="plus"></i>
                        新增规格
                    </button>
                </div>

                <div class="perm-root-card">
                    <nz-table #smallTable [nzBordered]="false" nzSize="small" [nzData]="skuPropData"
                        [nzShowPagination]="false">
                        <thead>
                            <tr>
                                <th>规格名称</th>
                                <th nzWidth="80px">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let data of skuPropData">
                                <td><input type="text" nz-input [(ngModel)]="data.name" placeholder="规格名称" /></td>
                                <td style="display: flex;">
                                    <a nz-button nzType="link">选择</a>
                                    <a nz-button nzType="link" nzDanger>移除</a>
                                </td>
                            </tr>
                        </tbody>
                    </nz-table>
                    <button nz-button nzType="dashed" class="add-button" (click)="addCatProp()"
                        style="margin: 12px 0px;padding: 0 8px;width: 100%;">
                        <i nz-icon nzType="plus"></i>
                        新增规格
                    </button>
                </div>
            </div>
        </nz-tab>
        <nz-tab nzTitle="sku列表">

        </nz-tab>
        <nz-tab nzTitle="设置">

        </nz-tab> -->
    </nz-tabset>
</ngs-panel>